<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: aquamarine;
      }

      /* @media screen and (max-width: 1000px) and (min-width: 600px) {
        body {
          background-color: red;
        }
      }

      @media screen and (max-width: 600px) {
        body {
          background-color: blue;
        }
      } */

      /* orientation: landscape横屏 */
      /* orientation: portrait竖屏 */
      @media screen and (orientation: landscape) {
        body {
          background-color: red;
        }
      }
    </style>
  </head>
  <body></body>
</html>

<!-- 
  媒体查询是响应式布局的一种实现, 我们可以通过媒体查询来实现响应式布局

  查询的就是显示器的特性(视口宽度, 屏幕宽高比例（横竖屏）)

  语法:
    @media screen and (条件1) and (条件2) {}
 -->
